/** @format */

let line = document.querySelector(".line");
let slipNav = document.querySelector(".nav_right");
let slipAll = document.querySelectorAll(".nav_right li");
//给所有的a标签添加index属性，方便后面查找
for (let i = 0; i < slipAll.length; i++) {
	slipAll[i].setAttribute("data-index", i);
}
//移入跟随
slipNav.addEventListener("mouseover", function (e) {
	console.log(e.target);
	let target = e.target;
	let len = 120 * target.dataset.index + 10; // 计算当前的left值
	line.style.left = len + "px";
});
//移出归位
slipNav.addEventListener("mouseleave", function (e) {
	let selected = document.querySelector(".selected");
	let len = 120 * selected.dataset.index + 10; // 线回到被选择元素的位置
	line.style.left = len + "px";
});
//点击切换选中元素
slipNav.addEventListener("click", function (e) {
	let target = e.target;
	//排他思想
	for (let i = 0; i < slipAll.length; i++) {
		slipAll[i].classList.remove("selected");
	}
	target.classList.add("selected"); // 通过添加类名实现颜色变化
});
